<template>
  <div class="p-6 space-y-6">
    <div class="text-center">
      <h2 class="text-xl font-bold text-gray-900 mb-2">功能测试</h2>
      <p class="text-gray-600">测试各种API功能</p>
    </div>

    <div class="space-y-4">
      <button
        @click="testDeviceAPIs"
        :disabled="isLoading"
        class="w-full btn-secondary disabled:opacity-50"
      >
        测试设备API
      </button>

      <button
        @click="testVoiceAPI"
        :disabled="isLoading"
        class="w-full btn-secondary disabled:opacity-50"
      >
        测试语音API
      </button>

      <button
        @click="testSyncAPI"
        :disabled="isLoading"
        class="w-full btn-secondary disabled:opacity-50"
      >
        测试同步API
      </button>

      <button
        @click="testSendTextToDevice"
        :disabled="isLoading || !store.user || !store.currentDeviceId"
        class="w-full btn-secondary disabled:opacity-50"
      >
        测试发送文字到设备
      </button>
    </div>

    <div v-if="testResult" class="bg-gray-50 p-4 rounded-lg">
      <h3 class="text-sm font-medium text-gray-700 mb-2">测试结果</h3>
      <pre class="text-xs text-gray-600 whitespace-pre-wrap">{{ testResult }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useAppStore } from '@/store';
import { deviceAPI, voiceAPI, syncAPI } from '@/services/api';
import { communicationService } from '@/services/communication';

const store = useAppStore();
const isLoading = ref(false);
const testResult = ref('');

const runTest = async (name: string, testFn: () => Promise<any>) => {
  isLoading.value = true;
  testResult.value = '';
  
  try {
    const result = await testFn();
    testResult.value = `✅ ${name} 成功\n${JSON.stringify(result, null, 2)}`;
  } catch (error: any) {
    testResult.value = `❌ ${name} 失败\n${error.message || error}`;
  } finally {
    isLoading.value = false;
  }
};

const testDeviceAPIs = () => runTest('设备API', async () => {
  if (!store.user) throw new Error('用户未登录');
  const devices = await deviceAPI.getUserDevices(store.user.id);
  const onlineDevices = await deviceAPI.getOnlineDevices(store.user.id);
  return { devices, onlineDevices };
});

const testVoiceAPI = () => runTest('语音API', async () => {
  if (!store.user) throw new Error('用户未登录');
  const history = await voiceAPI.getHistory(store.user.id);
  return { history };
});

const testSyncAPI = () => runTest('同步API', async () => {
  if (!store.user || !store.currentDeviceId) throw new Error('用户或设备未设置');
  const testText = '这是一条测试文字';
  const result = await syncAPI.pushToAll(store.user.id, store.currentDeviceId, testText);
  return { result };
});

const testSendTextToDevice = () => runTest('发送文字到设备', async () => {
  if (!store.user || !store.currentDeviceId) throw new Error('用户或设备未设置');
  const devices = await deviceAPI.getOnlineDevices(store.user.id);
  if (devices.length === 0) throw new Error('没有在线设备');
  const targetDevice = devices[0];
  const testText = '这是一条来自手机端的测试文字';
  communicationService.sendTextToDevice(targetDevice.deviceId, testText);
  return {
    success: true,
    message: `文字已发送到设备: ${targetDevice.deviceId}`,
    text: testText
  };
});
</script> 